<script>
import { Message } from "element-ui";
import city from "../js/citydata.js";

export default {
  data() {
    return {
      loading: false,
      dialogFormVisible: false,
      title: "新增驿站",
      date: [],
      address: [],
      communityName: "",
      courierStationName: "",
      courier: {
        courierStationName: "",
        courierStationImage: "",
        courierStationProvince: "",
        courierStationCity: "",
        courierStationDistrict: "",
        courierStationAddress: "",
        courierStationCommunityId: "",
      },
      page: {
        // pageNum: 1,
        pageSize: 5,
        currentPage: 1,
        total: 100,
      },
      tableData: [],
      communityNameList: [{ value: "" }],
      city: city,
    };
  },
  methods: {
    //清除数据
    clear() {
      this.courier = {
        courierStationName: "",
        courierStationImage: "",
        courierStationProvince: "",
        courierStationCity: "",
        courierStationDistrict: "",
        courierStationAddress: "",
        courierStationCommunityId: "",
      };
      this.address = [];
      this.dialogFormVisible = false;
      this.communityName = "";
    },
    //获取数据
    get() {
      this.loading = true;
      this.$http
        .get("/courierStation/querySearchCourierStationList", {
          //pageNum=1&pageSize=10
          params: {
            courierStationName: this.courierStationName,
            communityName: this.communityName,
            pageNum: this.page.currentPage,
            pageSize: this.page.pageSize,
            startTime: this.date[0],
            endTime: this.date[1],
          },
        })
        .then((res) => {
          let data = res.data;
          console.log(res.data);
          if (data.status == 200) {
            //对数据复制
            this.tableData = data.data.list;
            this.page.total = data.data.total;
            Message({
              type: "success",
              message: "数据获取成功",
            });
            this.loading = false;
          } else {
            Message("数据获取失败");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //获取外部数据
    getList() {
      this.$http
        .get("/community/communityList", {
          //pageNum=1&pageSize=10
          params: {
            communityName: "",
            pageSize: 99999,
          },
        })
        .then((res) => {
          // let data = res.data;
          // console.log(res.data);
          if (res.data.status == 200) {
            //对数据复制
            // console.log(data.data.list.length);
            let list = res.data.data.list;
            // console.log(list.length);

            for (let i = 0; i < list.length; i++) {
              this.communityNameList[i] = {
                label:
                  list[i].communityName +
                  "(" +
                  list[i].communityCity +
                  list[i].communityDistrict +
                  list[i].communityAddress +
                  ")",
                value: list[i].communityId,
                // label: data.data.list[i].communityName,
              };
            }
            // this.communityNameList = JSON.stringify(this.communityNameList)
            // this.communityNameList = this.communityNameList.join()
            // console.log(this.communityNameList);
            Message({
              type: "success",
              message: "数据获取成功",
            });
            this.loading = false;
          } else {
            Message("数据获取失败");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //呼出填写信息的表单
    add() {
      this.getList();
      // console.log(this.courier);
      // console.log(this.communityName);
      this.$http
        .post("/courierStation/addCourierStation", this.courier)
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: "添加成功",
            });
          } else {
            Message({
              type: "error",
              message: "添加失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
      this.get();
      this.clear();
    },
    //切换状态
    handleClick(val, status) {
      this.$http
        .post("/courierStation/modifyCourierStation", {
          courierStationId: val,
          courierStationStatus: status,
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: res.data.message,
            });
            this.get();
          } else {
            Message({
              type: "error",
              message: res.data.message,
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //修改信息
    //配置信息
    setEdit(val) {
      this.dialogFormVisible = true;
      this.title = "编辑驿站";
      this.courier = val;
      this.address = [
        val.courierStationProvince,
        val.courierStationCity,
        val.courierStationDistrict,
      ];
      // console.log(this.courier);
      // console.log(this.address);
    },
    editCom() {
      this.$http
        .post("/courierStation/modifyCourierStation", this.courier)
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: "修改成功",
            });
          } else {
            Message({
              type: "error",
              message: "修改失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
      setTimeout(() => {
        this.get();
      }, 500);
      this.clear();
    },

    //分页
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.get();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.get();
    },
  },
  watch: {
    date(newVal) {
      if (newVal != null) {
        this.date[0] = newVal[0];
        this.date[1] = newVal[1];
      } else {
        this.date = ["", ""];
      }
      this.get();
    },
    address() {
      this.courier.courierStationProvince = this.address[0];
      this.courier.courierStationCity = this.address[1];
      this.courier.courierStationDistrict = this.address[2];
    },
  },
  mounted() {
    this.get();
    this.getList();
  },
};
</script>
<template>
  <div>
    <div class="block">
      <span>驿站名称:</span>
      <el-input
        style="width: 200px"
        v-model="courierStationName"
        placeholder="请输入"
        clearable
      ></el-input>
      <span>小区名称:</span>
      <el-input
        style="width: 200px"
        v-model="communityName"
        placeholder="请输入"
        clearable
      ></el-input>
      <span>创建时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="primary" @click="get" plain>搜索</el-button>
    </div>
    <el-row>
      <el-button type="primary" @click="dialogFormVisible = true" plain
        >新增驿站</el-button
      >
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="clear"
      >
        <el-form :model="courier">
          <el-form-item>
            <span>驿站名称</span>
            <el-input
              v-model="courier.courierStationName"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <span>所属地区</span>
            <div class="block">
              <el-cascader
                v-model="address"
                :options="city"
                style="width: 200px"
              ></el-cascader>
            </div>
            <el-input
              v-model="courier.courierStationAddress"
              style="width: 200px"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <span>所属小区</span>
            <div>
              <!-- <el-cascader
                v-model="communityName"
                :options="communityNameList"
              ></el-cascader> -->
              <el-select
                v-model="courier.courierStationCommunityId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in communityNameList"
                  :key="item.class"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button type="primary" @click="add" v-show="title == '新增驿站'"
            >添加</el-button
          >
          <el-button
            type="primary"
            @click="editCom"
            v-show="title == '编辑驿站'"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      height="520"
      stripe
      :header-cell-style="{ background: '#1890FF', color: 'white' }"
    >
      <el-table-column fixed prop="courierStationId" label="ID">
      </el-table-column>
      <el-table-column prop="courierStationName" label="驿站名称">
      </el-table-column>
      <el-table-column prop="courierStationImage" label="驿站照片">
      </el-table-column>
      <el-table-column prop="courierStationAddress" label="驿站地址">
        <template slot-scope="scope">
          <span>{{ scope.row.courierStationProvince
            }}{{ scope.row.courierStationCity }}
            {{ scope.row.courierStationDistrict }}
            {{ scope.row.courierStationAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="courierStationCommunityName" label="所在小区">
      </el-table-column>
      <el-table-column prop="courierStationOrderCount" label="订单总数">
      </el-table-column>
      <el-table-column prop="addTime" label="添加时间"></el-table-column>
      <el-table-column prop="courierStationStatus" label="状态">
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            v-show="scope.row.courierStationStatus == 1"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-close"
            circle
            v-show="scope.row.courierStationStatus == 0"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="handleClick(scope.row.courierStationId, 0)"
            size="small"
            v-show="scope.row.courierStationStatus == 1"
          >
            立即下架
          </el-button>
          <el-button
            type="success"
            @click="handleClick(scope.row.courierStationId, 1)"
            size="small"
            v-show="scope.row.courierStationStatus == 0"
          >
            立即上架
          </el-button>
          <el-button type="primary" @click="setEdit(scope.row)" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
span,
.el-button {
  margin: 5px 10px;
}
</style>